<script src="/scripts/nicedit_files/nicEdit-latest.js" type="text/javascript"></script>		    
<link rel="stylesheet" type="text/css" media="screen" href="/scripts/nicedit_files/screen.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/scripts/nicedit_files/spellchecker.css" />
<script type="text/javascript" src="/scripts/nicedit_files/jquery-impromptu.js"></script>
<script type="text/javascript" src="/scripts/nicedit_files/jquery.spellchecker.js"></script>
<script type="text/javascript" src="/scripts/nicedit_files/jquery-impspeller.js"></script>

<form enctype="multipart/form-data" id="messageform" name="messageform" method="POST" action="/journals/index/journals/<?php echo $ctx->startDate;?>" >
    
		<input type="hidden"  name="color_id" id="color_id"   value="8"/>
		<div class="pad_a">
    <div class="EmoType Fright">
<strong class="Fleft pad_t8">Emotion Type</strong>
<ul id="mycolorband">
					<li><a href="javascript:void(0);" name="anger" id="1"  onclick="document.getElementById('color_id').value=1;change_bg(1);" style="width:45px; height:23px;"><img src="/images/Emot_1.png" border="0" alt="Anger" title="Anger" /></a></li>
					<li><a href="javascript:void(0);" name="anticipation"  id="2" onclick="document.getElementById('color_id').value=2;change_bg(2);" style="width:80px;"><img src="/images/Emot_2.png" border="0" alt="Anticipation" title="Anticipation" /></a></li>
					<li><a href="javascript:void(0);" name="joy" id="3"  onclick="document.getElementById('color_id').value=3;change_bg(3);" style="width:65px;"><img src="/images/Emot_3.png" border="0" alt="Joy" title="Joy" /></a></li>
					<li><a href="javascript:void(0);" name="trust" id="4"  onclick="document.getElementById('color_id').value=4;change_bg(4);" style="width:65px;"><img src="/images/Emot_4.png" border="0" alt="Love" title="Love" /></a></li>
					<li><a href="javascript:void(0);" name="fear" id="5"  onclick="document.getElementById('color_id').value=5;change_bg(5);" style="width:60px;"><img src="/images/Emot_5.png" border="0" alt="Fear" title="Fear" /></a></li>
					<li><a href="javascript:void(0);" name="surprise" id="6"  onclick="document.getElementById('color_id').value=6;change_bg(6);" style="width:70px;"><img src="/images/Emot_6.png" border="0" alt="Surprise" title="Surprise" /></a></li>
					<li><a href="javascript:void(0);" name="sadness" id="7"  onclick="document.getElementById('color_id').value=7;change_bg(7);" ><img src="/images/Emot_7.png" border="0" alt="Sadness" title="Sadness" /></a></li>
		
		</ul>
        <div class="clear"></div>
		</div>
 <div class="pad_t8">
 <label>&nbsp;</label>
		<textarea name="description" id="description" style="height:400px;width:368px" value="Write your notes"><?php echo $ctx->editDesc;?></textarea>
		<div class="clear"></div>
		</div>
<div class="pad_t5"><a class="Button" href="javascript:void(0);" onclick="valid_messageform(document.messageform);"><span>Save</span></a><a class="Button" href="javascript:void(0);" onclick="calcelContent(document.messageform);"><span>Cancel</span></a></div>
    <div class="clear"></div>
    </div>
	<input type="hidden" name="editedId" value="<?php echo $ctx->editId;?>" />
</form>
	
	<script type="text/javascript">
	//<![CDATA[
function valid_messageform(frm)
{

//alert($('#description').val());return false;
	var result = false;
	var result1 = false;
	$('#description').val(nicEditors.findEditor('description').getContent());
	result = !isEmpty(frm.description, "${php: this.translate('errmsg_note')}") ;
	//if(result) result = !isEmpty(frm.color_id, "Please Select Emotion type") ;
	if(result)
	{ 	    
		$('#messageform').submit();
	}
	//alert(result);
	//return result;
}
function calcelContent(frm)
{

	nicEditors.findEditor('description').setContent('');
	//location.reload();
	
}
//]]>
	</script>
<script type="text/javascript">
//<![CDATA[
change_bg(<?php echo $ctx->editcolorId;?>);
function change_bg(liid)
  {
	//alert(liid);
	 var arr=document.getElementById("mycolorband").getElementsByTagName("a");
	 for(var i=0;i<arr.length;i++)
	 {
		 aid=arr[i].id;
		 //alert(aid);
		 if(aid==liid)
		 {
			document.getElementById(aid).setAttribute('class','active');
			 //document.getElementById(aid).style.background="url(/images/color_image/"+aid+".png)";
		 }
		 else
		 {
			 document.getElementById(aid).removeAttribute('class','active');
		 }
	 }
  }
  
//]]>
</script>

<script type="text/javascript">			
	//------------------------------------------
	// create the button for spellcheck
	//------------------------------------------
	var nicExampleOptions = {
		buttons : { 'spellcheck' : {name : __('Check Spelling'), type : 'nicEditorSpellCheckButton' } },
		iconFiles : { 'spellcheck' : '/images/spellcheck.gif' }
	};
	
	var nicEditorSpellCheckButton = nicEditorButton.extend({   
		mouseClick : function() { 
			runImpspellerNicEdit(this.ne.selectedInstance);
		}
	});
	
	nicEditors.registerPlugin(nicPlugin,nicExampleOptions);
	
	//------------------------------------------
	// create the editor
	//------------------------------------------

		new nicEditor({buttonList : ['fontSize','bold','italic','underline','html','spellcheck']}).panelInstance('description');

	
	
	//------------------------------------------
	// our function to check spelling
	//------------------------------------------
	function runImpspellerNicEdit(instance){
		var editor = instance;
		var mp = editor.getContent();
	
		$.impspeller(mp,{
			success: function(text,html,el){
				editor.setContent(html);
				editor.saveContent();
			}
		});
	}
	</script>